<template>
  <div class="table-box">
    <div class="left-box">
      <div class="left-type">
        <el-select v-model="title" placeholder="请选择角色">
          <el-option label="系统管理员" id="1" />
          <el-option label="线路管理员" id="2" />
          <el-option label="巡检员" id="3" />
          <el-option label="消缺员" id="4" />
        </el-select>
      </div>
      <div class="left-tree">
        <div class="title">系统功能菜单树</div>
        <ul class="left-tree__content">
          <div v-for="item in treeData" :key="item.id" class="tree-item">
            <div>
              <input type="checkbox" :id="item.name" v-model="item.id" />
              <label :for="item.name">{{ item.name }}</label>
            </div>
            <ul class="left-subTree">
              <div
                v-for="subItem in item.child"
                :key="subItem.id"
                class="subTree-item"
              >
                <input type="checkbox" :id="subItem.name" />
                <label :for="subItem.name">{{ subItem.name }}</label>
              </div>
            </ul>
          </div>
        </ul>
      </div>
    </div>
    <div class="right-box"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = ref("");

const treeData = ref([
  {
    name: "系统管理",
    id: "0",
    child: [
      { name: "角色管理", id: "0" },
      { name: "用户管理", id: "0" },
      { name: "角色权限配置", id: "0" },
      { name: "系统配置", id: "0" },
    ],
  },
  {
    name: "杆塔管理",
    id: "1",
    child: [],
  },
  {
    name: "线路管理",
    id: "2",
    child: [],
  },
  {
    name: "缺陷管理",
    id: "3",
    child: [
      { name: "缺陷类型设置", id: "0" },
      { name: "缺陷等级确认", id: "0" },
    ],
  },
  {
    name: "信息统计",
    id: "4",
    child: [
      { name: "巡检记录统计", id: "0" },
      { name: "消缺记录统计", id: "0" },
    ],
  },
]);

onMounted(() => {
  treeData.value.forEach((item) => {
    // item.state = falses
  });
});
</script>

<style scoped lang="scss">
.table-box {
  display: flex;
  align-items: center;
  width: 1000px;
  height: calc(100vh - 150px);
  box-sizing: border-box;
  margin: 0 auto;
  border: 2px solid #ccc;

  .left-box {
    width: 200px;
    height: 98%;
    margin: 0 5px;
    padding: 5px;
    box-sizing: border-box;
    border: 2px solid #ccc;

    .left-type {
      margin-bottom: 5px;
    }
  }
}

.left-tree {
  margin-top: 0.5rem;

  .left-tree__content {
    margin-top: 0.5rem;
    font-size: 14px;

    .tree-item {
      margin-bottom: 1rem;

      .subTree-item {
        margin: 3px 0;
      }
    }

    .left-subTree {
      margin-left: 1rem;
    }
  }

  input {
    vertical-align: middle;
    margin-right: 2px;
  }
}
</style>
